<template>
  <div>
    <i-page-header title="个人设置"></i-page-header>

    <Card :bordered="false" dis-hover class="ivu-mt listbox">
      <Spin size="large" fix v-if="spinShow"></Spin>

      <Form
        ref="formValidate"
        :model="formValidate"
        :rules="ruleValidate"
        :label-width="120"
        label-position="right"
      >
        <FormItem label="管理员账号" prop="">
          <Input
            type="text"
            v-model="formValidate.username"
            :disabled="true"
            class="input"
          ></Input>
        </FormItem>

        <FormItem label="角色权限" prop="">
          <Input
            type="text"
            v-model="formValidate.roleName"
            :disabled="true"
            class="input"
          ></Input>
        </FormItem>

        <FormItem label="姓名" prop="name">
          <Input type="text" v-model="formValidate.name" class="input"></Input>
        </FormItem>

        <FormItem label="管理头像" prop="avatar">
          <ui-upload
            :upUrl="upUrl"
            :img="formValidate.avatar"
            fileName="上传头像"
            :headers="upHeaders"
            @onUpload="onUpload"
          ></ui-upload>
        </FormItem>
        <FormItem label="注册时间" prop="reg_time">
          {{ formValidate.regTime }}
        </FormItem>

        <FormItem label="最后登录时间" prop="last_time">
          {{ formValidate.lastTime }}
        </FormItem>

        <FormItem label="定位信息" prop="ip">
          <div class="fx-r fx-bc">
            <div>{{ formValidate.ip }}</div>
            <el-tag style="margin-left: 10px"
              >({{ formValidate.ipArea }})</el-tag
            >
          </div>
        </FormItem>

        <FormItem>
          <Button type="primary" @click="handleSubmit('formValidate')"
            >提交</Button
          >
        </FormItem>
      </Form>
    </Card>
  </div>
</template>

<script>
import IPageHeader from '../../../../layouts/system/page-header/index'
import { mapState, mapActions } from 'vuex'
import UiUpload from '../../../../ui/upload/index'
import Setting from '../../../../setting'
import util from '../../../../libs/util'
import { AccountInfo, AccountUpdate } from '../../../../api/system/account'
export default {
  name: 'index',
  components: { UiUpload, IPageHeader },
  computed: {
    ...mapState('system/user', ['info']),
  },
  data() {
    return {
      formValidate: {
        username: '',
        name: '',
        roleName: '',
        avatar: '',
        regTime: '',
        lastTime: '',
        ip: '',
        ipArea: '',
        pwd: '',
        new_pwd: '',
        conf_pwd: '',
      },
      dialogVisible: false,
      upUrl: '',
      upHeaders: {},
      //加载效果
      spinShow: true,
      ruleValidate: {
        name: [
          { required: true, message: '您的姓名不能为空', trigger: 'blur' },
        ],
      },
    }
  },

  created() {
    var upHeaders = {}
    //上传路径
    this.upUrl = Setting.apiBaseURL + '/systemv1/upload/index'
    console.log(this.upUrl)
    //上传header数据
    const token = util.cookies.get('system_token')
    if (token) {
      upHeaders['SYSTEM-ACC-TOKEN'] = token
    }
    this.upHeaders = upHeaders
    //获取数据
    AccountInfo(this.info.id)
      .then((res) => {
        this.spinShow = false
        if (res.code == 200) {
          this.formValidate = res.data
        }
      })
      .catch((err) => {
        console.log(err)
      })
  },
  methods: {
    handleSubmit(name) {
      this.$refs[name].validate((valid) => {
        console.log(valid)
        if (valid) {
          AccountUpdate(this.formValidate)
            .then((res) => {
              this.$Message.success(res.msg)
            })
            .catch((res) => {
              this.$Message.success(res.msg)
            })
        }
      })
    },
    /**
     * 上传文件
     * @param res
     */
    onUpload: function (res) {
      if (res.code == -1) {
        Notice.error({
          title: '系统提示',
          content: res.msg,
        })
      } else {
        this.formValidate.avatar = res.data.img
      }
    },
  },
}
</script>
<style scoped>
.el-upload--picture-card {
  width: 100px;
  height: 100px;
}
</style>
